 <template>
  <div id="app3">
    <header class="headerfuck">
      <div>
        <div class="titlefuck">
          <img src="../../assets/images/01_11.png" alt class="img_zuofuck" @click="fanhui_btn" />
          <div>目标考核</div>
          <div class="btn-addfuck">
            <div class="datatimefuck">
              <img src="../../assets/images/99.png" class="leftsfuck" @click="less" alt />
              <span class="datatime-introfuck">{{dataNum}}</span>
              <img src="../../assets/images/99.png" class="rightsfuck" @click="add" alt />
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="titfuck">{{title}}</div>
    <van-grid direction="horizontalfuck" :column-num="3" :border="false">
      <van-grid-item v-for="(item,index) in list" :key="index" @click="next(item.userId)">
        <div class="boxfuck">
          <div>
            <div>{{item.userName}}</div>
            <div class="typefuck">{{item.type}}</div>
          </div>
          <div class="boximgfuck">
            <img src="../../assets/images/jg.gif" v-if="item.light==1" class="lightfuck" alt />
            <img src="../../assets/images/jsd.gif" v-if="item.light==3" class="lightfuck" alt />
            <img src="../../assets/images/dwxc/jg-lv.gif" v-if="item.light==2" class="lightfuck" alt />
          </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      dataNum: 2020,
      dwId: "",
      year: "",
      list: []
    };
  },
  methods: {
    fanhui_btn() {
      this.$router.back();
    },
    next(id) {
      this.$router.push({
        path: "/mbkh-table",
        query: {
          id: id,
          year: 2020
        }
      });
    },
    less() {
      //  this.dataNum--;
    },
    add() {
      // this.dataNum++;
    },
    listArry() {
      try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log("plus问题");
      }
      this.axios
        .get(
          this.$global_msg.Url.host +
            "/performancereport/dwDec?dwId=" +
            this.dwId +
            "&year=" +
            this.year
        )
        .then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log("plus问题");
          }
          if(res.data.rows.list.length==0){
              this.$toast('暂无数据!')
          }
          this.title = res.data.rows.mc;
          this.list = res.data.rows.list;
          console.log(res);
        })
        .catch(err => {
          plus.nativeUI.closeWaiting();
          console.log(err);
        });
    }
  },
  mounted() {
    document.body.style.backgroundColor = "white";
  },
  created() {
    this.dwId = localStorage.getItem("abandonid");
    this.year = localStorage.getItem("year");
    this.listArry();
  }
};
</script>
<style>
.headerfuck {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.titlefuck {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.titlefuck > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuofuck {
  width: 0.2593rem;
  height: 0.463rem;
}
.leftsfuck {
  width: 0.26rem;
  height: 0.4rem;
}
.rightsfuck {
  width: 0.26rem;
  height: 0.4rem;
  transform: rotate(-180deg);
}
.datatimefuck {
  width: 2rem;
  display: flex;
  /* padding: 0 0.266667rem; */
}
.datatime-introfuck {
  padding: 0 0.213333rem;
  font-size: 0.32rem;
}
.btn-addfuck {
  position: absolute;
  right: 0;
  width: auto !important;
  height: 80%;
  bottom: 0;
  display: flex;
  align-items: center;
}
.btn-addfuck {
  font-size: 0.388888rem !important;
}
.titfuck {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.4rem;
  color: #000000;
}
.lightfuck {
  width: 0.653333rem;
  height: auto;
  margin-top: -0.38rem;
}
.boxfuck {
  display: flex;
  justify-content: space-between;
  padding: 0.28rem 0 0 0.2rem;
}
.van-grid {
  margin-top: 0.2667rem;
  /* border-bottom: 1px solid #ddd; */
  /* border-top: 1px solid #ddd; */
}
.van-grid-item{
  border-top: 1px solid #ddd;
  border-right: 1Px solid #ddd;
  border-bottom: 1px solid #ddd;
}  
.van-grid-item__content--center {
    display: flex;
    align-items: stretch;
    /* background: red; */
}
</style>
